You can group buttons together to create a navigation bar.
Basedev ready
Preview
Code
<div class="slds-button-group" role="group">
<button class="slds-button slds-button--neutral">Refresh</button>
<button class="slds-button slds-button--neutral">Edit</button>
<button class="slds-button slds-button--neutral">Save</button>
<button class="slds-button slds-button--icon-border-filled" aria-haspopup="true">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Actions</span>
</button>
</div>
When the icon button is disabled, it disappears. When the disabled attribute is placed on the icon button, the .slds-button--last
class must be appended to the final button in the group. If the last button is wrapped in another element, place the .slds-button--last
class on the wrapping element instead.
For the inverse version of the button group, use the .slds-button--inverse
class.
Note: The inverse group is seen on the edit dashboard. The disabled attribute might not be applicable in this situation.
Icon Groupdev ready
Preview
Code
<div class="slds-button-group" role="group">
<button class="slds-button slds-button--icon-border">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
</svg>
<span class="slds-assistive-text">Charts</span>
</button>
<button class="slds-button slds-button--icon-border">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
</svg>
<span class="slds-assistive-text">Filter List</span>
</button>
<button class="slds-button slds-button--icon-more" aria-haspopup="true">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#sort"></use>
</svg>
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--x-small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Actions</span>
</button>
</div>
An icon group is primarily used in the anchor of a page that can change views or be sorted. It usually contains stateful icon buttons.
Component Overview
Buttons in a group are surrounded by a parent with the .slds-button-group
class. If the last button is an icon, like the down triangle, use the .slds-button--icon-border-filled
class when accompanying a .slds-button--neutral
group. If you would like it to hide when disabled
, add the .slds-toggle-visibility
class. When hiding the final icon when disabled, the icon to its left should receive the .slds-button--last
so it receives the proper styling.
If the last button in a group needs to be wrapped in another element (for example, a drop-down trigger), add the .slds-button--last
class to the wrapper element to create proper spacing and borders.
Accessibility
Include the Aria role role="group"
so that assistive technologies are alerted to the grouping.
Usage
Class Name | Usage | |
---|---|---|
.slds-button-group | Applied to:
Initializes a grouped set of buttons | Required: Required Comments:Changes the rounding and borders of buttons within to look like a group |
.slds-button--last | Applied to: button wrapper Outcome:Identifies the last button when wrapped in another element | Required: No, optional element or modifier Comments:Only required if the |
.slds-toggle-visibility | Applied to:
Identifies the last icon button when it should be hidden when `[disabled]` | Required: No, optional element or modifier Comments:Only required when you want the the icon button indicating there's more data to be hidden when inactive/disabled |